<template>
	<view class="class-table-manage">
		<view class="top">
			<picker style="background-color: rgb(100, 191, 255); width: 280rpx; height: 60rpx; border-radius: 15rpx"
				@change="bindPickerChange" :range="coursesWeeks">
				<view style="width: 280rpx;text-align: center;line-height: 60rpx;">当前选择：{{ coursesWeeks[coursesWeek] }}</view>
			</picker>
			<view class="fenth-class-table" @tap="getTeamCourses">
				<view>拉取团队课表</view>
			</view>
		</view>
		<view class="content">
			<view class="class-order">
				<view v-for="(item, index) in coursesNumber" :key="index">
					<view style="margin-bottom: 112rpx">{{ item }}</view>
				</view>
			</view>
			<view class="day-class-items">
				<view v-for="(dayClass, weekNumber) in allClasses" :key="weekNumber">
					<view class="day-class-item">
						<view style="margin-bottom: 10rpx">周{{ chineseDay[weekNumber] }}</view>
						<view class="class-item" v-for="(classes, index) in dayClass" :key="index"
							:style="'background-color: ' + (weekNumber % 2 == 0 ? 'aliceblue;' : 'rgb(238,238,238);')">
							<view class="class-item-infos" v-for="(item,index1) in classes" :key="index1">
								<view class="class-item-info" @tap="showAddClass(item,weekNumber)"
									:style="'height: '+(150*item.number)+'rpx;background-color: '+(item.name == '' ? '' : 'rgb(100, 191, 255);')"
									v-if="item.week[coursesWeek] == 1">
									<view style="width: 80%; margin-left: 10%">{{item.name}}</view>
									<view style="width: 80%; margin-left: 10%">{{item.place}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 新增课程弹窗 -->
		<uni-popup ref="classTableEdit" type="bottom">
			<view class="modal-box">
				<view class="modal-title">编辑课程</view>
				<view class="modal-main">
					<view class="modal-main-item"
						style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center">
						<text class="modal-key">课程名</text>
						<input type="text" style="width: 350rpx; margin-left: 20rpx" v-model="classname"
							placeholder="请输入:" />
					</view>
					<view class="modal-main-item"
						style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center">
						<text class="modal-key">老师名</text>
						<input type="text" style="width: 350rpx; margin-left: 20rpx" v-model="classteacher"
							placeholder="请输入:" />
					</view>
					<view class="modal-main-item"
						style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center">
						<text class="modal-key">上课地点</text>
						<input type="text" style="width: 350rpx; margin-left: 20rpx" v-model="classplace"
							placeholder="请输入:" />
					</view>
					<view class="modal-main-item"
						style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center">
						<text class="modal-key">周几</text>
						<input type="text" style="width: 350rpx; margin-left: 20rpx" v-model="classweekNumber"
							placeholder="请输入:" />
					</view>
					<view class="modal-main-item"
						style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center">
						<text class="modal-key">开始节数</text>
						<input type="text" style="width: 350rpx; margin-left: 20rpx" v-model="classstart"
							placeholder="请输入:" />
					</view>
					<view class="modal-main-item"
						style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center">
						<text class="modal-key">持续节数</text>
						<input type="text" style="width: 350rpx; margin-left: 20rpx" v-model="classnumber"
							placeholder="请输入:" />
					</view>
					<view class="modal-main-item">
						<text class="modal-key">上课周数</text>
						<view class="modal-tags">
							<view @tap="changeChosenClassWeek(index)" :data-chosenindex="index"
								:class="classweek[index] ? 'chosen-tag' : ''" v-for="(item, index) in classweek"
								:key="index">
								{{ index + 1 }}
							</view>
						</view>
					</view>
				</view>
				<view class="modal-operations">
					<view class="modal-cancel" @tap="modalCancel">取消</view>
					<view class="modal-cancel" @tap="deleteClass">删除</view>
					<view class="modal-confirm" @tap="addClass">新增</view>
				</view>
			</view>
		</uni-popup>
		<!-- <view class="modal" v-if="modalHidden == 4">
			<view class="modal-box">
				<view class="modal-title">修改课程</view>
				<view class="modal-main">
					<view class="modal-main-item"
						style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center">
						<text class="modal-key">课程名</text>
						<input type="text" style="width: 350rpx; margin-left: 20rpx" @input="bindinput"
							v-model="classname" placeholder="请输入:" />
					</view>
					<view class="modal-main-item"
						style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center">
						<text class="modal-key">老师名</text>
						<input type="text" style="width: 350rpx; margin-left: 20rpx" @input="bindinput"
							v-model="classteacher" placeholder="请输入:" />
					</view>
					<view class="modal-main-item"
						style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center">
						<text class="modal-key">上课地点</text>
						<input type="text" style="width: 350rpx; margin-left: 20rpx" @input="bindinput"
							v-model="classplace" placeholder="请输入:" />
					</view>
					<view class="modal-main-item"
						style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center">
						<text class="modal-key">周几</text>
						<input type="text" style="width: 350rpx; margin-left: 20rpx" @input="bindinput"
							v-model="classweekNumber + 1" placeholder="请输入:" />
					</view>
					<view class="modal-main-item"
						style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center">
						<text class="modal-key">开始节数</text>
						<input type="text" style="width: 350rpx; margin-left: 20rpx" @input="bindinput"
							v-model="classstart + 1" placeholder="请输入:" />
					</view>
					<view class="modal-main-item"
						style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center">
						<text class="modal-key">持续节数</text>
						<input type="text" style="width: 350rpx; margin-left: 20rpx" @input="bindinput"
							v-model="classnumber" placeholder="请输入:" />
					</view>
					<view class="modal-main-item">
						<text class="modal-key">上课周数</text>
						<view class="modal-tags">
							<view @tap="changeChosenClassWeek" :data-chosenindex="index"
								:class="classweek[index] ? 'chosen-tag' : ''" v-for="(item, index) in classweek"
								:key="index">
								{{ index + 1 }}
							</view>
						</view>
					</view>
				</view>
				<view class="modal-operations">
					<view class="modal-cancel" @tap="modalCancel">取消</view>
					<view class="modal-cancel" @tap="deleteClass">删除</view>
					<view class="modal-confirm" @tap="updateClass">确定</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import http from '@/common/service/service.js'
	export default {
		data() {
			return {
				teamId: '',
				modalHidden: 0,

				// 新增或修改课程相关
				isUpdate: 0,

				// 判断是新增还是修改
				beforeClass: null,

				// 保存要删除的项（修改就是先删除再新增）
				beforeWeek: null,

				classname: '',
				classnumber: 1,
				classplace: '',
				classstart: 5,
				classteacher: '',
				classweek: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
				classweekNumber: 0,
				chineseDay: ['一', '二', '三', '四', '五', '六', '日'],
				coursesNumber: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				coursesWeek: 5,
				coursesWeeks: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周', '第7周', '第8周', '第9周', '第10周', '第11周', '第12周',
					'第13周', '第14周', '第15周', '第16周'
				],
				allClasses: '',
				weekNumber: 0,
				dayClass: [],

				paddingTop: null,
			};
		},
		onLoad: function(options) {
			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 2.获取状态栏高度
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			
			// 4.计算出导航栏高度  换算成rpx
			let navHeight = (menuButton.height + (menuButton.top - statusBarHeight) * 2) * (750 / windowWidth);
			
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.inputHeight = menuButton.height * (750 / windowWidth) + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			
			// #endif
			
			
			
			this.teamId = options.teamId
			this.coursesWeek = 5
			this.getAllMyClass();
		},
		onShow: function() {},
		methods: {
			getAllMyClass() {
				this.$api.getAllMyClass().then(res => {
					console.log("结果", res.data.classTable);
					this.allClasses = res.data.classTable
				})
			},

			bindPickerChange: function(e) {
				this.coursesWeek = e.detail.value
			},

			showAddClass(item, weeknumber) {


				if (item.name != '') {
					// 说明是修改不是新增
					// 保存要删除的
					var temp = 'beforeClass.weekNumber';
					this[temp] = weeknumber;
					this.beforeClass = item
					var arr = [].concat(item.week);
					this.beforeWeek = arr

					this.classname = item.name
					this.classnumber = item.number
					this.classplace = item.place
					this.classstart = item.start
					this.classteacher = item.teacher
					this.classweek = item.week
					this.classweekNumber = weeknumber
				} else {
					this.classname = item.name
					this.classnumber = item.number
					this.classplace = item.place
					this.classstart = item.start
					this.classteacher = item.teacher
					this.classweek = item.week
					this.classweekNumber = weeknumber
				}
				this.$refs.classTableEdit.open('bottom')
			},

			addClass() {
				var that = this;
				http({
					url: '/api/courses/add-team/' + that.teamId,
					data: {
						name: that.classname,
						number: that.classnumber,
						place: that.classplace,
						start: that.classstart,
						teacher: that.classteacher,
						week: that.classweek,
						weekNumber: that.classweekNumber
					},
					method: 'post',
					success: () => {
						uni.showToast({
							title: '添加成功',
							duration: 500
						});
						that.setData({
							modalHidden: 0
						});
						that.getCourses();
					}
				});
			},

			deleteClass() {
				var that = this;
				var temp = 'beforeClass.week';
				this[temp] = that.beforeWeek;
				http({
					url: '/api/courses/delete-team/' + that.teamId,
					data: that.beforeClass,
					method: 'post',
					success: () => {
						uni.showToast({
							title: '删除成功',
							duration: 500
						});
						that.modalHidden = 0
						that.getCourses();
					}
				});
			},

			updateClass() {
				var that = this;
				var temp = 'beforeClass.week';
				this[temp] = that.data.beforeWeek;
				http({
					url: '/api/courses/delete-team/' + that.teamId,
					data: that.beforeClass,
					method: 'post',
					success: () => {
						http({
							url: '/api/courses/add-team/' + that.teamId,
							data: {
								name: that.classname,
								number: that.classnumber,
								place: that.classplace,
								start: that.classstart,
								teacher: that.classteacher,
								week: that.classweek,
								weekNumber: that.classweekNumber
							},
							method: 'post',
							success: () => {
								uni.showToast({
									title: '修改成功',
									duration: 500
								});
								that.modalHidden = 0
								that.getCourses();
							}
						});
					}
				});
			},

			changeChosenClassWeek(index) {
				this.classweek[index] = this.classweek[index] ? 0 : 1;
				this.$forceUpdate()
			},

			//点击取消
			modalCancel: function() {
				this.modalHidden = 0
			},

			getTeamCourses() {
				console.log('占位：函数 getTeamCourses 未声明');
			},
		}
	};
</script>
<style scoped lang="scss">
	.class-table-manage {

		.top {
			display: flex;
			flex-direction: row;
			padding-top: 100rpx;

			// #ifdef H5
			padding-top: 40rpx;
			// #endif
			
			margin-left: 30rpx;


			.fenth-class-table {
				background-color: rgb(100, 191, 255);
				width: 220rpx;
				height: 60rpx;
				
				line-height: 60rpx;
				border-radius: 15rpx;
				text-align: center;
				
				margin-left: 30rpx;
			}

		}

		.content {
			display: flex;
			flex-direction: row;

			.class-order {
				display: flex;
				flex-direction: column;
				width: 10%;
				align-items: center;
				margin-top: 130rpx
			}

			.day-class-items {
				display: flex;
				flex-direction: row;
				width: 100%;
				margin-top: 30rpx;

				.day-class-item {
					display: flex;
					flex-direction: column;
					align-items: center;


					.class-item {
						display: flex;
						flex-direction: column;

						.class-item-infos {
							display: flex;
							flex-direction: column;
							margin-right: 2rpx;
							margin-left: 2rpx;


							.class-item-info {
								width: 95rpx;
								border-radius: 18rpx;
								font-size: 80%;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
							}
						}
					}
				}
			}
		}

	}

	.modal-box {
		width: 600rpx;
		margin-left: 35rpx;
		margin-bottom: 200rpx;


		padding: 40rpx;
		border-radius: 20rpx;
		background: white;

		display: flex;
		flex-direction: column;
		justify-content: space-between;

		text-align: left;


		.modal-title {
			margin-bottom: 20rpx;
			font-size: 36rpx;
			font-weight: 600;
			text-align: center;
		}

		.modal-main {
			width: 100%;
			font-size: 26rpx;
			margin: 20rpx 0 40rpx;


			.modal-main-item {
				width: 100%;
				margin-bottom: 30rpx;

				.modal-key {
					display: block;

					font-size: 32rpx;
					margin-bottom: 10rpx;
				}

				/* 模态框单项：多选标签 */
				.modal-tags {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					min-height: 80rpx;
				}

				.modal-tag {
					padding: 10rpx 20rpx;
					border-radius: 10rpx;
					margin: 0 20rpx 10rpx 0;
					background-color: rgb(231, 240, 247);
				}

				.chosen-tag {
					background: darkorange;
				}

			}

			.modal input,
			.modal .picker-input {
				box-sizing: border-box;
				margin: 10rpx 0;
				width: 100%;
				height: 60rpx;
				border-radius: 20rpx;
				padding: 0 20rpx;
				background-color: aliceblue;

				line-height: 60rpx;
			}

		}

		.modal-operations {
			display: flex;
			justify-content: space-around;
			width: 100%;
			margin-top: 20rpx;

			text-align: center;
		}

		.modal-operations>view {
			font-weight: bold;
			padding: 10rpx;
			border-radius: 4rpx;

			width: 40%;
		}

	}



	/* 模态框单项：多选标签 */
	.modal-tags {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		min-height: 80rpx;
	}

	.modal-tags>view {
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		margin: 0 20rpx 10rpx 0;
		background-color: rgb(231, 240, 247);
	}

	.modal-tags>.chosen-tag {
		background: darkorange;
	}

	.tag-add-area {
		width: 100%;
		height: 100rpx;
	}

	.tag-add-input {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tag-add-input>input {
		width: 70%;
	}

	.tag-operations {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 30%;
	}

	.tag-operations>image {
		margin-left: 10rpx;
	}
</style>
